<template>
  <div v-if="previewOpen">
    <!-- 尽量不要动el-dialog参数, 如果当前页面不能彻底关闭. 无法触发畅写编辑操作. 改的话可以两个账户打开相同文件, 同时进行编辑. 如果关闭这个页面 多人标识消失了就没问题 -->
    <el-dialog
      v-if="previewOpen"
      v-el-drag-dialog
      :title="tit"
      :visible.sync="previewOpen"
      :close-on-click-modal="false"
      append-to-body
      custom-class="previewDialog"
      :before-close="beforeClose"
      @close="closeDialog"
    >
      <div
        v-if="loading"
        width="100%"
        height="100%"
        border="0"
        style="display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center; background: #000000c0;"
      >
        <i class="el-icon-loading" style="width: 110px;font-size: 30px;text-align: center;color: white;margin-bottom: 30px;" />
        <br>
        <span style="font-size: 14px;width: 60px; color: white;">{{ $t('正在加载,请稍等...') }}</span>
      </div>
      <iframe
        v-show="!loading"
        id="iframeVue"
        :src="url"
        width="100%"
        height="100%"
        frameborder="no"
        border="0"
        append-to-body
        @load="closeLoading"
      />
      <!--<div v-if="watermakrHide">-->
      <!--  <watermark :width="watermarkWidth" :height="watermarkHeight" />-->
      <!--</div>-->
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { config } from '@/utils'
import { calculateReadingTime, getFileById } from '@/api/file/fileBase'
// import Watermark from '@/components/File/watermark'
import { removeWatermark } from '@/components/File/watermark/watermark'

export default {
  components: {
    // Watermark
  },
  props: {
    previewTit: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      previewOpen: false,
      loading: false,
      url: null,
      tit: '',
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      fileId: '',
      fileName: '',
      // watermakrHide: false,
      watermarkWidth: 1300,
      watermarkHeight: 800
    }
  },
  watch: {
    previewTit(newVal) {
      this.tit = newVal
    }
  },
  mounted() {
  },
  method() {
  },
  methods: {
    onlinePreviewFile(fileId, type) {
      // this.watermakrHide = false
      this.fileId = fileId
      this.previewOpen = true
      this.loading = true
      type === 'review' ? type = 'review' : type = 'view'
      this.url = config.baseURL + '/onlinePreview?id=' + fileId + '&onlineEditType=' + type + '&Authorization=' + getToken()
    },
    closeDialog() {
      this.previewOpen = false
    },
    beforeClose(done) {
      // 计算阅读时间
      calculateReadingTime(this.fileId)
      removeWatermark()
      done()
    },
    closeLoading(event) {
      if (event !== undefined) {
        this.loading = false
        getFileById(this.fileId).then(response => {
          this.fileName = '.'
          if (response.data !== null && response.data.length > 0) {
            this.fileName = response.data[0].name
            // 获取文件名称的后缀
            const fileType = this.fileName.substring(this.fileName.lastIndexOf('.') + 1)
            // 判断文件类型
            if (fileType === 'xls' || fileType === 'xlsx' || fileType === 'txt' || fileType === 'zip' || fileType === 'rar') {
              this.watermarkHeight = Number(document.getElementById('iframeVue').clientHeight)
              this.watermarkWidth = Number(document.getElementById('iframeVue').clientWidth)
              // this.watermakrHide = true
            }
          }
        })
      }
    }
  }
}
</script>
<style scoped>
.previewDialog .el-dialog__headerbtn .el-dialog__close {
  z-index: 2001;
}
</style>
